import React, { useState } from "react";
import { Button, message, Upload } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import "./style.css";
const Sub3 = () => {
  const [file, setFile] = useState();

  const handlePaste = (event: any) => {
    const items = event.clipboardData.items;
    let file = null;

    if (!items || items.length === 0) {
      message.error("当前浏览器不支持本地");
      return;
    }
    // 搜索剪切板items
    for (let i = 0; i < items.length; i++) {
      if (items[i].type.indexOf("image") !== -1) {
        file = items[i].getAsFile();
        break;
      }
    }
    if (!file) {
      message.error("粘贴内容非图片");
      return;
    }

    console.log("=====file====", file);
    setFile(file);
    // 此时file就是我们的剪切板中的图片对象
    // 如果需要预览，可以执行下面代码
    // const reader = new FileReader();
    // reader.onload = event => {
    //   preview.innerHTML = `<img src="${event.target.result}">`;
    // };
    // reader.readAsDataURL(file);
    // this.file = file;
  };


  return (
    <div className="box">
      <div id="preview" className="preBox" onPaste={handlePaste}>
        <span>将图片按Ctrl+V 粘贴至此处</span>
      </div>
      <Upload>
        <Button icon={<UploadOutlined />}>Click to Upload</Button>
      </Upload>
    </div>
  );
};

export default Sub3;
